import React from "react";
// 新版本没有useHistory了，取而代之的是useNavigate
import { Link, Routes, Route, useNavigate } from "react-router-dom";

const Home = () => {
  // navigate是一个方法
  const navigate = useNavigate();
  const fn = () => {
    // 如果这里面直接是路径，相当于push方法
    navigate("/about");

    // { replace: true }, 相当于replace方法
    // navigate("/about", { replace: true });

    // 直接写数字的表示go方法
    // navigate(2);
  };
  return (
    <div>
      home组件 - <button onClick={fn}>btn</button>
    </div>
  );
};

class About extends React.Component {
  render() {
    return <div>about组件</div>;
  }
}

const App = () => {
  return (
    <>
      <h3>router-v6-编程式导航</h3>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
};

export default App;
